<template>
  <div class="card-boxs">
    <div class="card-top">
      <div class="card-top-marsk" :class="{ 'card-top-marsk-show': loading2 }">
        <t-upload
          v-loading="loading2"
          ref="uploadRef1"
          accept=".png,.jpg"
          :auto-upload="true"
          :before-upload="beforeUpload"
          :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
        >
          <div class="upload-box">
            <div class="upload-box-item">
              <div class="upload-box-left">
                <t-icon size="14" name="upload" style="color: rgba(255, 255, 255, 1)"></t-icon>
              </div>
              <span>上传封面</span>
            </div>
          </div>
        </t-upload>
      </div>
      <img class="btm-item-info-img" :src="urls + props.info.coverUrl + webUrls" alt="" v-if="props.info.coverUrl" />
      <div class="btm-item-info-img" v-else>
        <imageNull />
      </div>
    </div>
    <div class="card-content-mg">
      <div class="card-content-mg-top">
        <span class="card-content-mg-top-left"
          >{{ props.info.name }}{{ props.info.subTitle ? '——' + props.info.subTitle : '' }}</span
        >
        <div class="action-item action-item-r" @click="pathEdit">
          <i class="doorIcon action-item-r-icon">&#xe651;</i>
          <!-- <img src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/ic_setting.svg" alt="" /> -->
        </div>
        <!-- <span class="card-content-mg-top-right" @click="pathEdit">设置</span> -->
      </div>
      <div class="card-content-mg-top-center">
        <div class="hu-status-type" :class="'hu-status-type-' + props.info.publishStatus">
          <t-popup
            attach="#menu-left-btn-xe200"
            :content="getProjectTypeName(props.info.publishStatus)"
            class="placement"
            placement="bottom-left"
            showArrow
            destroyOnClose
          >
            <span id="menu-left-btn-xe200">{{ getProjectType(props.info.publishStatus) }}</span>
          </t-popup>
          <t-popup attach="#pop-left-btn-xe500" class="placement" placement="bottom-left" showArrow destroyOnClose>
            <template #content>
              <div class="pop-content-prent">
                <span class="pop-content-prent-title">展览审核状态</span>
                <img src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/popImage.png" alt="" />
              </div>
            </template>
            <i class="doorIcon" id="pop-left-btn-xe500" :class="'hu-status-type-color-' + props.info.publishStatus"
              >&#xe635;</i
            >
          </t-popup>
        </div>
        <!-- <div class="item-text2-status hw-flex-style-c-c" :class="{ 'item-status-pass': props.info.publishStatus == 3 }">
          <span v-if="props.info.publishStatus == 4">已撤回</span>
          <span v-else-if="props.info.publishStatus == 5">已驳回</span>
          <span v-else>
            {{ props.info.publishStatus == 1 ? '进行中' : props.info.publishStatus == 2 ? '审核中' : '已发布' }}
          </span>
        </div> -->
        <div class="type-style">模版模式</div>
        <!-- <div class="type-style" v-if="props.info.companyId === 0">个人策展</div> -->
        <div class="type-style">
          {{ props.info.companyId === 0 ? '个人策展' : '单位策展' }}
        </div>
        <div style="margin-right: 8px" class="start hw-flex-style-c-c hw-click-cursor" @click="startSet">
          <i class="doorIcon" v-if="props.info.isAsterisk" style="color: RGBA(255, 204, 0, 1); font-size: 24px">
            &#xe649;</i
          >
          <i class="doorIcon" style="color: rgba(0, 0, 0, 0.38); font-size: 24px" v-else>&#xe64c;</i>
          <!-- <t-icon
            :name="props.info.isAsterisk ? 'star-filled' : 'star'"
            size="18" 
            :style="{ color: props.info.isAsterisk ? '#f2995f' : '#f2995f' }"
          ></t-icon> -->
        </div>
      </div>
      <div>
        <div class="btm-item">
          <span class="btm-item-title">展览创建人</span>
          <span class="btm-item-name">{{ props.info.createUserName }}</span>
          <span class="btm-item-name-solid"></span>
          <span class="btm-item-time"
            >创建于 {{ props.info.createDate ? props.info.createDate.substring(0, 10) : '' }}</span
          >
        </div>
        <div class="btm-item-description">
          <span class="btm-item-description-left">展览描述</span>
          <span class="btm-item-description-center" v-html="getDiscript(props.info.description)"></span>
          <!-- <div class="btm-item-description-right"> -->
          <!-- <div
              @click="visibleMessage2 = true"
              v-if="props.info.publishStatus == 1 || props.info.publishStatus == 4 || props.info.publishStatus == 5"
              class="edit-btn"
            >
              <span> 立即发布</span>
            </div>
            <div @click="withdrawnShow = true" v-else class="edit-btn-blank">
              <span> 撤回</span>
            </div> -->
          <!-- </div> -->
        </div>
        <div class="btm-item templateInfo-box">
          <span class="btm-item-title" style="margin-right: 30px">模板配置</span>
          <span class="btm-item-templateInfo-name">
            <img
              v-if="templateInfo.id !== 0"
              src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/door/templateIcon.png"
              alt=""
            />
            {{ templateInfo.id !== 0 ? templateInfo.name : '暂未选择' }}</span
          >
          <a
            style="margin-right: 8px"
            v-if="templateInfo.id !== 0"
            class="btm-item-check"
            :href="editUlrs + route.query.projectId"
            target="_blank"
          >
            <i class="doorIcon">&#xe630;</i>

            预览
          </a>
          <a
            v-if="props.info.publishStatus !== 3"
            class="btm-item-check"
            :href="doorUrl + 'portal/square?projectId=' + route.query.projectId"
            target="_blank"
          >
            <i class="doorIcon" v-if="templateInfo.id === 0">&#xe65e;</i>
            <i v-else class="doorIcon">&#xe66c;</i>
            {{ templateInfo.id === 0 ? '选择模板' : '更换模板' }}
          </a>
        </div>
        <div v-if="props.info.publishStatus !== 3">
          <div class="btm-pablic" v-if="props.info.role == 1">
            <div
              @click="visibleMessage2 = true"
              v-if="
                props.info.publishStatus == 1 ||
                props.info.publishStatus == 4 ||
                props.info.publishStatus == 5 ||
                props.info.publishStatus == 6
              "
              class="right-box1"
            >
              <i class="doorIcon">&#xe66e;</i>
              <span> 立即发布</span>
            </div>
            <div @click="withdrawnShow = true" v-else class="right-box1">
              <span> 撤回</span>
            </div>
            <div class="right-box2" @click="pathInfo">
              <i class="doorIcon">&#xe65d;</i>
              <span>编辑策展大纲</span>
            </div>
          </div>
          <div class="btm-pablic" v-else>
            <div class="right-box2" @click="pathInfo">
              <i class="doorIcon">&#xe65d;</i>
              <span>编辑策展大纲</span>
            </div>
          </div>
        </div>
        <div v-else class="publishStatus-success">
          <div class="right-box2" @click="pathInfo">
            <i class="doorIcon">&#xe65d;</i>
            <span>编辑策展大纲</span>
          </div>
          <a :href="editUlrs + route.query.projectId + '&mode=2'" target="_blank" class="right-box2-look">
            <i class="doorIcon">&#xe630;</i>
            <span>查看展览</span>
          </a>
          <div class="popup-parents" id="pop-btn-id-11">
            <t-popup v-model:visible="popShow" placement="bottom" :showArrow="false" destroyOnClose>
              <!-- v-model:visible="popShow" -->
              <!-- attach="#pop-btn-id-11" -->
              <template #content>
                <div class="select-item-parent">
                  <div class="select-item" @click="selectType(1)">
                    <i class="doorIcon">&#xe661;</i>
                    <span>复制展览链接</span>
                  </div>
                </div>
                <div class="select-item-parent">
                  <div class="select-item" @click="selectType(2)">
                    <i class="doorIcon">&#xe66f;</i>
                    <span>撤回展览</span>
                  </div>
                </div>
              </template>
              <div class="pop-btn" @click="popShow = true">
                <i class="doorIcon">&#xe667;</i>
              </div>
            </t-popup>
          </div>
        </div>
      </div>
      <!-- <div class="card-center hw-flex-style-b-c">
        <div class="child-item hw-flex-style-c-c-c">
          <span class="item-text1"> 展览状态 </span>
          
        </div>
        <div class="child-item hw-flex-style-c-c-c">
          <span class="item-text1"> 创建人 </span> 
          <span class="item-text2"> {{ props.info.createUserName }} </span>
        </div>
        <div class="child-item hw-flex-style-c-c-c"> 
          <span class="item-text1"> 创建时间 </span> 
          <span class="item-text2"> {{ props.info.createDate ? props.info.createDate.substring(0, 10) : '' }} </span>
        </div>
      </div>  
      <div class="card-bottom">
        <span class="bottom-text">
          <span v-html="getDiscript(props.info.description)"></span>
          <t-icon name="edit" @click="pathSetting" class="hw-click-cursor"></t-icon>
        </span>
        <div class="bottom-btn"> 
          <t-row :gutter="8"> 
            <t-col :span="12">
              <div style="display: flex">
                <div style="margin-right: 8px" class="start hw-flex-style-c-c hw-click-cursor" @click="startSet">
                  <t-icon
                    :name="props.info.isAsterisk ? 'star-filled' : 'star'"
                    size="18"
                    :style="{ color: props.info.isAsterisk ? '#f2995f' : '#f2995f' }"
                  ></t-icon>
                </div>
                <div
                  @click="publish"
                  v-if="props.info.publishStatus == 1 || props.info.publishStatus == 4 || props.info.publishStatus == 5"
                  class="edit-btn"
                  :class="{ 'item-status-pass': props.info.publishStatus == 3 }"
                >
                  <span> 立即发布</span>
                </div>
                <div
                  @click="withdrawn"
                  v-else
                  class="edit-btn"
                  :class="{ 'item-status-pass': props.info.publishStatus == 3 }"
                >
                  <span> 撤回</span>
                </div>

                <div style="flex: 1" class="go-text">
                  <t-button block theme="primary" @click="preview">去策展</t-button>
                </div>
              </div>
            </t-col>
          </t-row>
        </div>
      </div> -->
    </div>
    <messageModel
      submitText="前往"
      title="提示"
      :visible="visibleMessage1"
      problem="您暂未选择模板"
      message="是否前往模板广场选择？"
      @closeClick="closeClick"
      @submitClick="pathSubmitClick"
    />
    <messageModel
      submitText="发布"
      title="提示"
      :visible="visibleMessage2"
      problem="展览发布"
      message="是否发布展览进行审核？"
      @closeClick="closeClick2"
      @submitClick="pathSubmitClick2"
    />
    <messageModel
      submitText="撤回"
      title="提示"
      :visible="withdrawnShow"
      problem="撤回展览"
      message="是否撤回模板？"
      @closeClick="withdrawncloseClick"
      @submitClick="withdrawnpathSubmitClick"
    />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { getProjectType, getProjectTypeName } from '@/utils/minxin';
import { doorUrl, editUlrs } from '@/utils/minxin';
import { upLoadFn } from '@/utils/request/upload';
import imageNull from '@/components/imageNull/index.vue';
import messageModel from '@/components/messageModel/index.vue';
import { pathSquare } from '@/utils/minxin';
import { urls } from '@/utils/request/upload';
import { MessagePlugin } from 'tdesign-vue-next';
import { updateProject } from '@/api/project/project';
import { projectTemplate } from '@/api/templates/templates';
import { asterisk, publishProjact, withdrawnProjact } from '@/api/project/project';
import { configData } from '@/api/templates/templates';
import { ref, computed, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useProjectStore } from '@/store';

const popShow = ref(false);
const loading2 = ref(false);
const visibleMessage1 = ref(false);
const visibleMessage2 = ref(false);
const withdrawnShow = ref(false);
const webUrls: string = '?imageView2/2/h/160/w/160/format/webp';
const router = useRouter();
const route = useRoute();
const store = useProjectStore();
const emit = defineEmits(['setStart', 'setStatus', 'updateUrl']);
const templateInfo = ref({
  code: '0',
  coverUrl: '',
  description: '',
  id: 0,
  mode: 1,
  name: '',
});
const props = defineProps({
  info: {
    type: Object,
  },
});

nextTick(() => {
  console.log(props.info, '4444444444444444444444');
});
const preview = () => {
  router.push({
    path: '/prijectMenu/plan',
    query: {
      projectId: localStorage.getItem('projectId'),
    },
  });
  // configData(localStorage.getItem('projectId')).then((res) => {
  //   if (res.statusCode == 200) {
  //     store.setstyleInfo(res.data);
  //     store.setTeplateType(0);
  //     if (res.data.id === 0 || !res.data.id) {
  //       visibleMessage1.value = true;
  //       return;
  //     }
  //     pathSquare(res.data.id);
  //   }
  // });
};
const pathInfo = () => {
  router.push({
    path: '/prijectMenu/plan',
    query: {
      projectId: localStorage.getItem('projectId'),
    },
  });
};
const uploadAllFilesInOneRequest = ref(false);
const init = async () => {
  try {
    let { data } = await projectTemplate(localStorage.getItem('projectId'));
    if (data) {
      templateInfo.value = data;
    }
  } catch {}
};
init();
const selectType = (type: number) => {
  if (type === 1) {
    const textToCopy = editUlrs + route.query.projectId + '&mode=2';
    const tempInput = document.createElement('textarea');
    tempInput.value = textToCopy;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand('copy');
    document.body.removeChild(tempInput);
    // alert('文本已复制到剪贴板！');
    MessagePlugin.success('展览链接已复制');
  } else {
    withdrawnShow.value = true;
  }
  popShow.value = false;
};
const onOverlayClick = () => {};
const pathEdit = () => {
  router.push({
    path: '/prijectMenu/administration',
    query: {
      projectId: localStorage.getItem('projectId'),
    },
  });
};
const beforeUpload = (file: any) => {
  //回调钩子
  if (
    file.type !== 'image/png' &&
    file.type !== 'image/jpg' &&
    file.type !== 'image/jpeg' &&
    file.type !== 'image/jpeg'
  ) {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (file.size / 1048576 > 2) {
    MessagePlugin.error('上传大小超出2M限制');
    return;
  }
  loading2.value = true;
  upLoadFn(file, 5).then((res) => {
    // console.log(res);
    if (res) {
      uploadUrl({ coverUrl: res });
    } else {
      MessagePlugin.error('上传失败');
    }
    loading2.value = false;
  });
};
const uploadUrl = async (e: any) => {
  let res: any = await updateProject(e, localStorage.getItem('projectId'));
  if (res.statusCode == 200) {
    emit('updateUrl', e.coverUrl);
  }
};
const startSet = async (projectId: number | string, index: number) => {
  // asterisk
  try {
    let res = await asterisk(localStorage.getItem('projectId'));
    if (res.statusCode == 200) {
      emit('setStart');
    }
  } catch {}
};
const getDiscript = (info: string) => {
  console.log(info, '1111111111111111111');
  if (!info) {
    return;
  }
  let str: string = '';
  if (info.length > 48) {
    return (str = info.substring(0, 48) + '...');
  } else {
    return info;
  }
};
const pathsquare = () => {
  let projectId = localStorage.getItem('projectId');
  let url = doorUrl + 'portal/square?projectId=' + projectId;
  window.open(url, '_blank');
};
const edit = () => {
  router.push('/prijectMenu/administration');
};
const pathSetting = () => {
  router.push('/prijectMenu/administration');
};
const withdrawn = async () => {
  //撤回
  let { statusCode } = await withdrawnProjact(route.query.projectId);
  // emit('')
  if (statusCode == 200) {
    MessagePlugin.success('撤回成功');
    emit('setStatus', 4);
  }
};
const publish = async () => {
  //发布
  let { statusCode } = await publishProjact(route.query.projectId);

  if (statusCode == 200) {
    MessagePlugin.success('发布成功,等待审核通过');
    if (props.info.companyId === 0) {
      emit('setStatus', 2);
      return;
    }
    emit('setStatus', 7);
  }
};
const closeClick = () => {
  //取消前往
  visibleMessage1.value = false;
};
const pathSubmitClick = () => {
  let projectId = localStorage.getItem('projectId');
  let url = doorUrl + 'portal/square?projectId=' + projectId;
  window.open(url, '_blank');
  visibleMessage1.value = false;
};
const closeClick2 = () => {
  //取消前往
  visibleMessage2.value = false;
};
const pathSubmitClick2 = () => {
  publish();
  visibleMessage2.value = false;
};
const withdrawncloseClick = () => {
  //取消撤回
  withdrawnShow.value = false;
};
const withdrawnpathSubmitClick = () => {
  withdrawn();
  withdrawnShow.value = false;
};
</script>

<style lang="less" scoped>
.card-boxs {
  display: flex;
  width: 100%;
  // min-width: 746px;
  min-height: 244px;
  background: #fefefe;
  border-radius: 6px;
  padding: 24px;

  border: 1px solid #f5f5f5;
  overflow: hidden;
}
.t-card__body {
  padding: 0 !important;
}
.hw-flex-style-c-c-c {
  width: 100%;
  height: 100%;
}
.card-top {
  position: relative;
  display: flex;
  width: 160px;
  height: 160px;
  border-radius: 4px;
  overflow: hidden;

  .image-boxs {
    width: 160px;
    height: 160px;
  }
  .top-class {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    font-size: 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
    span {
      margin-right: 8px;
    }
  }
}
.card-top-marsk {
  display: none;
  position: absolute;
  justify-content: center;
  align-items: center;
  z-index: 14;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.card-top-marsk-show {
  display: flex;
}
.card-top:hover {
  .card-top-marsk {
    display: flex;
  }
}
.btm-item-info-img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  background: #fafafa;
}
.card-content-mg {
  flex: 1;
  margin-left: 24px;
}
.card-content-mg-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.card-content-mg-top-left {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 28px;
}
.card-content-mg-top-right {
  cursor: pointer;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  line-height: 22px;
}
.card-content-mg-top-center {
  display: flex;
  align-items: center;
  margin-top: 16px;
}
.type-style {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 24px;

  background: #f5f5f5;
  border-radius: 4px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;

  color: rgba(0, 0, 0, 0.38);
  line-height: 22px;
  margin-left: 8px;
}
.item-text2-status {
  padding: 0 12px;
  height: 24px;
  border-radius: 4px;

  background: #fffbe6;

  border: 1px solid #faad14;

  color: #faad14;
  span {
    font-size: 14px;
  }
  .icon-box-color {
    color: #faad14;
  }
}
.item-status-pass {
  padding: 0 12px;
  height: 24px;
  border-radius: 4px;
  color: rgba(0, 168, 112, 1);
  border: 1px solid rgba(0, 168, 112, 1);
  background: rgba(0, 168, 112, 0.2);
  .icon-box-color {
    color: rgba(0, 168, 112, 1);
  }
}
.start {
  width: 24px;
  height: 24px;
  background: rgba(207, 189, 168, 0.1);
  border-radius: 2px;
  margin-left: 8px;
}
.btm-item {
  display: flex;
  align-items: center;
  margin-top: 16px;
}
.btm-item-title {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  line-height: 22px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.btm-item-name {
  margin-left: 16px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
  color: #333333;
  line-height: 24px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.btm-item-name-solid {
  width: 24px;
  height: 16px;
  box-shadow: inset -1px 0px 0px 0px #f0f0f0;
  margin-right: 24px;
}
.btm-item-time {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 22px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.btm-item-description {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
.btm-item-description-left {
  width: 56px;
  height: 22px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 22px;
  margin-right: 30px;
}
.btm-item-description-center {
  flex: 1;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
  // text-overflow: -o-ellipsis-lastline;
  // overflow: hidden; //溢出内容隐藏
  // text-overflow: ellipsis; //文本溢出部分用省略号表示
  // display: -webkit-box; //特别显示模式
  // -webkit-line-clamp: 2; //行数
  // line-clamp: 2;
  // -webkit-box-orient: vertical; //盒子中内容竖直排列
}
.btm-item-description-right {
  width: 80px;
  height: 32px;
  background: #e62b17;
  border-radius: 3px;
  margin-left: 8px;
  .edit-btn {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 32px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 20px;
  }
}
.edit-btn-blank {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 32px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 20px;
  border: 1px solid #e62b17;
  border-radius: 3px;
  color: #e62b17;
  background: #ffffff;
}
.btm-item-templateInfo-name {
  display: flex;
  align-items: center;
  height: 24px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
  line-height: 24px;
  margin: 0 15px;
  margin-left: 0;
  img {
    margin-right: 4px;
    width: 20px;
    height: 20px;
  }
}
.btm-item-check {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #e62b17;
  line-height: 24px;
  .doorIcon {
    font-size: 16px;
    margin-right: 4px;
    color: #e62b17;
  }
  // img {
  //   width: 16px;
  //   height: 16px;
  //   margin-right: 4px;
  // }
}
.templateInfo-box {
  margin-top: 8px;
}
.upload-box {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  // display: none;
}
.upload-box-left {
  // border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  margin-right: 8px;
}
.upload-box-item {
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    height: 23px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 23px;
  }
}
:deep(.t-upload .t-icon-loading) {
  color: #e62b17;
}
.action-item {
  cursor: pointer;
  width: 24px;
  height: 24px;
  // border: 1px solid #999;
  .doorIcon {
    font-size: 24px;
    color: RGBA(158, 158, 158, 1);
  }
}
.right-box1 {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 36px;
  background: #e62b17;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 24px;
  .doorIcon {
    font-size: 16px;
    color: #ffffff;
    margin-right: 8px;
  }
}
.right-box1:hover {
  background: #f2573f;
}
.action-item-r-icon:hover {
  color: #f2573f;
}
.right-box2 {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 156px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #e62b17;

  color: #e62b17;
  line-height: 24px;
  margin-left: 12px;
  .doorIcon {
    font-size: 16px;
    color: #e62b17;
    margin-right: 8px;
  }
  span {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
  }
}
.publishStatus-success {
  display: flex;
  margin-top: 16px;
}
.right-box2-look {
  display: flex;
  align-items: center;
  padding: 0 16px;
  width: 124px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #e62b17;
  margin-left: 12px;
  .doorIcon {
    font-size: 16px;
    color: #e62b17;
    margin-right: 8px;
  }
  span {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
  }
}
.pop-btn {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #e62b17;
  margin-left: 12px;
  .doorIcon {
    font-size: 16px;
    color: #e62b17;
  }
}
.right-box2:hover {
  background: #ffece6;
}
.pop-btn:hover {
  background: #ffece6;
}
.right-box2-look:hover {
  background: #ffece6;
}
.btm-pablic {
  display: flex;
  margin-top: 16px;
}
.hu-status-type {
  padding: 0 12px;

  height: 24px;
  span {
    margin: 0;
  }
  .doorIcon {
    margin-left: 7px;
    font-size: 14px;
  }
}
.pop-content-prent {
  width: 754px;
  .pop-content-prent-title {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
  }
  img {
    width: 754px;
    height: 370px;
  }
}
#pop-left-btn-xe500 {
  :deep(.t-popup__content) {
    padding: 16px;
  }
}
#menu-left-btn-xe200 {
  :deep(.t-popup__content) {
    background-color: #333;
    color: #fff;
    border-color: #333;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
  }
  :deep(.placement) {
    // border-color: #333;
    background: transparent !important;
  }
  :deep(.t-popup[data-popper-placement^='left'] .t-popup__arrow::before) {
    background-color: #333;
    // border-color: #333;
  }
  :deep(.t-popup__arrow::before) {
    background-color: #333;
  }
}
#pop-btn-id-11 {
  position: relative;
  :deep(.t-popup) {
    z-index: 999;
  }
  :deep(.t-popup__content) {
  }
  :deep(.t-popup[data-popper-placement^='left'] .t-popup__content--arrow) {
    margin-right: 0px;
  }
  :deep(.t-popup__arrow) {
    display: none;
  }
}
.select-item-parent {
  display: flex;
  align-items: center;
  height: 42px;
  width: 192px;
}
.select-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 192px;
  height: 36px;
  padding: 0 16px;
  .doorIcon {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.8);
  }
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
    margin-left: 4px;
  }
}
.select-item:hover {
  background: #f0f0f0;
}
.popup-parents {
  display: flex;
  position: relative;
  height: 36px;
}
</style>
